import Chessboard from "@/src/component/Chessboard.js"
import Resources from "@/src/util/Resources.js"


let stage, ticker, queue, chessboard;

// 新建场景，并加载资源
const gameWidth = 720;
const gameHeight = 1280;

// 主题
const theme = "default";

/**
 * 初始化UI
 */
let initUI = (onComplete) => {

	// 这里需要根据不同的屏幕进行缩放
	const scale = 0.5;
	stage = new Hilo.Stage({
		container: document.querySelector("#scene"),
		width: gameWidth,
		renderType: 'canvas',
		height: gameHeight,
		scaleX: scale,
		scaleY: scale
	});

	stage.enableDOMEvent([Hilo.event.POINTER_START, Hilo.event.POINTER_MOVE, Hilo.event.POINTER_END]);

	ticker = new Hilo.Ticker(30);
	ticker.addTick(stage);
	ticker.start();

	load(onComplete);
}

let getChessboard = () => {

	return chessboard;
}

function load(onComplete){
	queue = new Hilo.LoadQueue();
	
	queue.add(Resources.getResources(theme));
	
	queue.on('complete', (e) => {
		// 加载完成后绘制棋盘
		console.log("资源加载完成");
	
		// 这里是点击棋盘的空白处，也就是背景图片，这时候需要取消选中棋子的状态
		let chessboardEvent = function(e) {
			if (e.eventTarget.id == "chessboard_background") {
				e.eventTarget.parent.clearMark();
			}
		};
		// 资源加载成功新建一个棋盘
		chessboard = new Chessboard({
			id: "chessboard",
			stageWidth: gameWidth,
			stageHeight: gameHeight,
			sourceQueue: queue
		});
	
		//  将棋盘放入场景中
		chessboard.addTo(stage);
	
		// 棋盘的事件
		chessboard.on(Hilo.event.POINTER_START, chessboardEvent);
	
		onComplete();
	});
	
	queue.start();
}


export default {
	initUI,
	getChessboard
}
